<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <!-- Vue使用步骤：准备容器 -> 引入Vue包 -> 创建Vue实例并指定配置项 -->
  
  <body>
    <!-- 1.准备容器：为容器添加唯一标识id，容器内部可使用Vue -->
    <div id="app">
      {{ message }}
    </div>
  </body>
  
  <!-- 2.引入Vue包：全局构建Vue，所有顶层API被暴露在全局Vue对象上 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    // 3.创建Vue实例并指定配置项
    Vue.createApp({ // createApp创建Vue实例，其参数对象为根组件
      data() {
        return {
          message: 'HelloVue' // data配置项内的配置信息替换HTML内的模板语法-插值表达式{{ message }}
        };
      }
    }).mount('#app'); // mount渲染Vue实例，其参数可为CSS选择器或DOM元素，其返回值为根组件实例而非引用实例
  </script>
</html>